<template>
  <div class="app-container">
    <div class="graph">
      <h3 style="color: #fff;" v-if="title">{{ title }}</h3>
      <div ref="container" class="graph-container">
        <div class="graph-detail">
          <el-descriptions v-if="currentNode" class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label"> IP </template>
              {{ currentNode.params.ip }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 组织 </template>
              {{ currentNode.params.org.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 归属类型 </template>
              {{ 'org' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <el-button type="primary" size="small" @click="anti">基于单节点数据微扰动的抗IP社会归属识别</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getGraphData" /> -->\
    <el-dialog title="选择新组织" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="新组织" :label-width="'120px'" prop="newOrg">
          <el-select v-model="form.newOrg" filterable  placeholder="请选择新组织">
            <el-option v-for="dict in allOrg" :key="dict.name" :label="dict.name" :value="dict.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抗归属方法" :label-width="'120px'" prop="fantype">
          <el-select style="width:300px;" v-model="form.fantype" filterable  placeholder="请选择抗归属方法">
           <el-option label="基于动态渲染的单节点抗IP归属识别" value="1"></el-option>
           <el-option label="基于字体替换的单节点抗IP归属方法" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import G6 from "@antv/g6";
import {
  antiHomingInfo,
  predictAntiHomingInfo, getAllOrg
} from "@/api/IPOwnershipProtection/dataStatistics.js";
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      select: "1",
      nodeTotal: 0,
      linkTotal: 0,
      inputValue: "",
      graph: null,

      currentNode: null,
      dialogFormVisible: false,
      allOrg: [],
      form: {
        newOrg: '',
        fantype: ''
      },
      rules: {
        newOrg: [
          { required: true, message: '请选择新组织', trigger: 'change' }
        ],
      }
    };
  },
  props: ["lineDash", "graphData", 'total', 'activeTab', 'title'],
  watch: {
    graphData: {
      deep: true,
      handler(val) {
        const copyData = JSON.parse(JSON.stringify(val));
        this.graph.clear();
        this.graph.data(copyData);
        this.graph.render();
        this.graph.getNodes().forEach(node => {
          const model = node.getModel();
          if (model.params.flag) {
            this.graph.updateItem(node, {
              size: 50,
              style: {
                fill: "orange",
                stroke: "#5B8FF9",
              },
            });
          }
        });
      },
    },
  },
  created() { },
  mounted() {
    getAllOrg().then(res => {
      this.allOrg = res.data
    })
    this.currentNode = null;
    this.initGraph();
  },
  beforeUnmount() {
    if (this.graph) {
      this.graph.destroy();
    }
  },
  methods: {
    anti() {
      this.dialogFormVisible = true
    },
    sure(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.newOrg == this.currentNode.params.org.name) {
            this.$message.error('新组织不能和原组织一样,请重新选择!')
          } else {
            if (this.activeTab == 'first') {
              antiHomingInfo({ ip: this.currentNode.label, org: this.currentNode.params.org.name, newOrg: this.form.newOrg, fantype: this.form.fantype }).then(res => {
                if (res.code == 200) {
                  this.$message({ type: 'success', message: '抗归属正在进行!' });
                  this.$router.push('/IPOwnershipProtection/dataStatistics')
                }
              })
            } else {
              predictAntiHomingInfo({ ip: this.currentNode.label, org: this.currentNode.params.org.name, newOrg: this.form.newOrg, fantype: this.form.fantype }).then(res => {
                if (res.code == 200) {
                  this.$message({ type: 'success', message: '抗归属正在进行!' });
                  this.$router.push('/IPOwnershipProtection/dataStatistics')
                }
              })
            }
          }
        } else {
          return false;
        }
      });
    },
    getGraphData() {
      this.$emit('changePage', this.queryParams);
    },
    search() { },
    initGraph() {
      const containerWidth = this.$refs.container.offsetWidth;
      const containerHeight = document.documentElement.offsetHeight;
      // 创建关系图实例
      this.graph = new G6.Graph({
        container: this.$refs.container,
        width: containerWidth,
        height: containerHeight - 200,
        modes: {
          default: ["drag-canvas", "zoom-canvas", "drag-node",],
        },
        defaultNode: {
          type: "circle",
          size: 40,
          style: {
            fill: "#9EC9FF",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
          labelCfg: {
            style: {
              fill: "#fff",
            },
          },
        },
        defaultEdge: {
          type: "line",
          style: {
            stroke: "#F6BD16",
            lineWidth: 2,
            lineDash: this.lineDash,
          },
          labelCfg: {
            autoRotate: true,
            style: {
              fill: "#fff",
            },
          },
        },
        layout: {
          type: "force",
          preventOverlap: true,
          linkDistance: 200,
          nodeSpacing: 20,
        },
      });

      // 绑定事件
      this.graph.on("node:click", (e) => {
        const node = e.item;
        if (node.getModel().params.flag) {
          this.$emit("node-click", node.getModel());
          if (this.currentNode?.id == node.getModel().id) {
            this.currentNode = null
          } else {
            this.currentNode = node.getModel();
          }
        } else {
          this.graph.getNodes().forEach((n) => {
            n.clearStates(["selected"]);
          });
          this.currentNode = null
        }
      });

      this.graph.on("edge:click", (e) => {
        const edge = e.item;
        this.$emit("edge-click", edge.getModel());
        this.currentNode = null
      });
      // 渲染数据
      this.graph.data(this.graphData);
      this.graph.render();
      this.graph.getNodes().forEach(node => {
        const model = node.getModel();
        if (model.params.flag) {
          this.graph.updateItem(node, {
            size: 50,
            style: {
              fill: "orange",
              stroke: "#5B8FF9",
            },
          });
        }
      });
    },

    highlightNode(node) {
      // 清除所有节点状态
      this.graph.getNodes().forEach((n) => {
        n.clearStates(["selected"]);
      });
      node.setState("selected", true);
      this.graph.paint();
    },

    highlightEdge(edge) {
      // 清除所有边状态
      this.graph.getEdges().forEach((e) => {
        e.clearStates(["selected"]);
      });
      edge.setState("selected", true);
      this.graph.paint();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.graph {
  position: relative;
  height: 100%;

  .graph-detail {
    width: 300px;
    position: absolute;
    right: 20px;
    top: 100px;
  }
}

::v-deep .pagination-container {
  left: 0;
}
</style>
